<template>
  <section class="main">
    <!-- 全选按钮 -->
    <input
      id="toggle-all"
      class="toggle-all"
      type="checkbox"
      v-model="checkAll"
      v-if="list.length > 0"
    />
    <label for="toggle-all"></label>
    <ul class="todo-list">
      <li
        :class="{ completed: item.isDone, editing: currentId === item.id }"
        v-for="item in showList"
        :key="item.id"
      >
        <div class="view">
          <!-- 比较简单的逻辑直接写updateCheckbox -->
          <input
            class="toggle"
            type="checkbox"
            :checked="item.isDone"
            @change="updateCheckbox(item.id)"
          />
          <label @dblclick="editShow(item.id)">{{ item.name }}</label>
          <button class="destroy" @click="del(item.id)"></button>
        </div>
        <!-- 因为是动态获取的value，input隐藏后value值就没了，在显示就是动态获取的value值，所以隐藏的时候不需要把value的值复原 -->
        <input
          class="edit"
          :value="item.name"
          @keyup.esc="currentId = ''"
          @keyup.enter="edit(item.id, $event)"
          v-focus
        />
      </li>
      <!-- <li>
        <div class="view">
          <input class="toggle" type="checkbox" />
          <label>Buy a unicorn</label>
          <button class="destroy"></button>
        </div>
        <input class="edit" value="Rule the web" />
      </li> -->
    </ul>
  </section>
</template>

<script>
// 按需引入辅助函数
import { mapState, mapMutations, mapGetters } from "vuex";
export default {
  computed: {
    // 获取state里的数据
    ...mapState(["list"]),
    // 获取根据type计算过后的list列表
    ...mapGetters(["showList"]),
    checkAll: {
      get() {
        return this.list.every((item) => item.isDone);
      },
      set(value) {
        this.$store.commit("checkAll", value);
      },
    },
  },
  methods: {
    //   修改复选框状态
    ...mapMutations(["updateCheckbox", "del"]),
    // 修改
    // update(id) {
    //   this.$store.commit("updateCheckbox", id);
    // },
    // 删除
    // del(id) {
    //   console.log(id);
    //   this.$store.commit("del", id);
    // },

    // 显示修改框
    editShow(id) {
      this.currentId = id;
    },

    // 确认修改
    edit(id, e) {
      this.$store.commit("edit", {
        id: id,
        value: e.target.value,
      });
      this.currentId = "";
    },
  },
  // 保存id
  data() {
    return {
      currentId: "",
    };
  },
  // 自定义指令
  directives: {
    // 用来自动获取焦点
    focus: {
      inserted(el) {
        el.focus();
      },
      update(el) {
        el.focus();
      },
    },
  },
};
</script>

<style>
</style>